<template>
  <el-dialog
    :close-on-click-modal="false"
    :show-close="false"
    :visible.sync="isAdd"
  >
    <el-table 
      @selection-change="handleSelectionChange" :data="form" :header-cell-style="headClass"  style="width:100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="shop.name" label="商家名称"></el-table-column>
      <el-table-column prop="goods.title" label="商品名"></el-table-column>
      <el-table-column prop="spec_item.key_name" label="规格"></el-table-column>
      <el-table-column prop="code" label="核销码"></el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('closeDialog')" size="small">关闭</el-button>
      <el-button @click="submitFormAdd('ruleForm')" type="primary" size="small">核销</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Vue, Prop, Provide } from "vue-property-decorator";
import writeApi from "@/api/write";
@Component({
  components: {}
})
export default class userEditDialog extends Vue {
  // 属性或参数中使用 ！：表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
  @Prop(Boolean) isAdd!: boolean;
  @Prop() form!: []
  @Provide() multipleSelection:any=[]
  @Provide() subData:any={
    ids:'',
    order_id:'',
  }
  handleSelectionChange(val) {
    this.multipleSelection = val
  }
  // 提交
  submitFormAdd() {
    if(this.multipleSelection.length>0){
      this.subData={ids:'',order_id:''}
      this.multipleSelection.forEach((item:any)=>{
        this.subData.ids+=item.id+','
      })
      this.subData.ids=this.subData.ids.substring(0, this.subData.ids.lastIndexOf(','))
      this.subData.order_id=this.multipleSelection[0].order_id
      writeApi.writeOff(this.subData)
      .then((res: any) => {
        if(res.data.status){
          this.$message({
            message: '操作成功',
            type: "success"
          });
          this.$emit("closeDialog");
        }else{
          this.$message({
            message: res.data.msg,
            type: "error"
          });
        }
      });
    }else{
      this.$message({
        message: '请选择需要核销的商品',
        type: "error"
      });
    }
  }
   
   headClass() {
    return "text-align: center;background:#eef1f6;";
  }
  created() {
  }
}
</script>

<style lang="scss" scoped>
.form-box {
  .el-input,
  .el-select {
    width: 200px !important;
  }
}
</style>
